<template>
    <div>
        <div class="box">
            <horder class="horder">
                <van-nav-bar title="分类页面" left-text="" left-arrow @click-left="$router.go(-1)" />
            </horder>
            <main class="main">
                <van-sidebar v-model="active" @change="onchange">
                    <van-sidebar-item title="食品" />
                    <van-sidebar-item title="电器" />
                    <van-sidebar-item title="服装" />
                    <van-sidebar-item title="手机" />
                    <van-sidebar-item title="零食" />
                </van-sidebar>
  <ul style="float: right;column-count: 2;margin-top: -300px;">
    <li v-for="item in list" :key="item.id">
      <img :src="item.image" alt="">
      <p>{{ item.title }}</p>
      <p>{{ item.price }}</p>
    </li>
  </ul>
            </main>
        </div>
    </div>
</template>

<script setup>
import api from '@/api/api'
import { ref } from 'vue';
const list=ref([])
const onchange=(index)=>{
    const arr=["食品", "电器", "服装", "手机","零食"]
    api.get('/kind',{
        params:{key:arr[index]}
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data
        }
    })
}
</script>

<style lang="scss" scoped></style>